<template>
  <div class="loginView">
    <!-- 头顶 -->
    <div class="top">
      <div class="le">狐阅 · <span>登录</span></div>
      <div class="ri" @click="notoken">
        游客登录 <span class="iconfont icon-xiangyou1"></span>
      </div>
    </div>
    <!-- logo盒子 -->
    <!-- <div class="box">
      <div class="logo">
        <img src="../assets/img/logo.png" alt="" />
      </div>
    </div> -->
    <!-- <form> -->
    <!-- 电话框 -->
    <div class="main">
      <div class="phoneinp">
        <div class="le"><i class="iconfont icon-wodepinglun"></i></div>
        <input
          maxlength="11"
          type="text"
          placeholder="请输入电话"
          v-model="phonenum"
          @change="yzm(phonenum)"
        />
      </div>
      <!-- 密码框 -->
      <div class="passinp">
        <div class="le"><i class="iconfont icon-jiesuo"></i></div>
        <span class="cant" v-if="!oknum" @click="tipSendFun">请输入验证码</span>
        <input
          maxlength="4"
          type="text"
          placeholder="请输入验证码"
          v-model="code"
          v-if="oknum"
          @input="isfour(code)"
        />
        <div class="ygm" v-if="getcode" @click="send">
          <span v-if="!showtime">获取验证码</span
          ><span v-if="showtime">{{ codetime }}秒后发送</span>
        </div>
      </div>
      <!-- 提交框 -->
      <!-- changecolor -->
      <input
        type="submit"
        :class="['submit', changecolor ? 'con' : '']"
        value="登录"
        @click="submit(phonenum, code)"
      />
    </div>

    <!-- </form> -->
    <!-- 没有账号 -->
    <!-- <div class="havent">没有账号？立刻注册一个！</div> -->
  </div>
</template>

<script>
import { Toast } from "vant";
import { useRouter } from "vue-router";
import { ref } from "vue";
import { getCommentJsonData, getCommentData } from "../assets/api/comment.js";
export default {
  setup() {
    const router = useRouter();
    // 手机号正确才可以输验证码
    let oknum = ref(false);
    // 电话号码绑定
    let phonenum = "";
    //换颜色控制提交框
    let changecolor = ref(false);
    // 验证码
    let code = "";
    // 控制验证码盒子
    let getcode = ref(false);
    // 控制倒计时显示
    let showtime = ref(false);
    //倒计时时间
    let codetime = ref(5);

    // 有电话号码，验证码才出现
    let yzm = (phonenum) => {
      // 电话号码不为空而且符合正则才可以出验证码框
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!phonenum == "" && reg.test(phonenum)) {
        getcode.value = true;
        console.log("继续输入验证码");
        Toast({ message: "继续输入验证码", position: "bottom" });
        // oknum.value = true
      } else {
        console.log("请输入正确的手机号码");
        Toast("请输入正确的手机号码");
        getcode.value = false;
        oknum.value = false;
        return;
      }
      // console.log("1212")
    };

    //是四位验证码才可以点击提交
    // let codelists = []
    let isfour = (item) => {
      console.log(item);
      // console.log(code)

      // codelists.push(code)
      // console.log(codelists)
      let codeReg = /^[0-9]{4}$/;
      console.log(codeReg.test(code) ? true : false);
      // console.log(typeof(!codeReg.test(code)))
      // !codeReg.test(code)
      // code.length==4
      if (codeReg.test(item)) {
        changecolor.value = true;
        // console.log("验证码不对");
        return;
      } else {
        changecolor.value = false;
      }
    };
    //创建一个定时器
    let timer = null;
    // 操作验证码发送，文字切换倒计时
    let send = () => {
      codetime.value = 5;
      // changecolor.value = true//提交框颜色
      oknum.value = true; //验证码框
      showtime.value = true; //倒计时
      // console.log(codetime.value)
      timer = setInterval(() => {
        codetime.value--;
        if (codetime.value == 0) {
          clearInterval(timer);
          showtime.value = false;
          return;
        }
        console.log(codetime.value);
      }, 1000);
    };
    //提交框变颜色
    console.log(changecolor);
    // 登錄驗證,提交
    let submit = (phone, code) => {
      // if (phone == "" || code == "") {
      if (phone == "") {
        Toast("请输入手机号码");
        return;
      }
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!reg.test(phone)) {
        //不正确处理
        Toast("手机号不正确");
        return;
      }
      // 有验证码才可以点提交
      if (code == "") {
        Toast("请输入验证码");
        return;
      }
      let codeReg = /^[0-9]{4}$/;
      if (!codeReg.test(code)) {
        Toast("验证码不对");
        return;
      }

      //登陆的信息
      let usermsg = {
        phonenum: phone,
        code: code,
        type: "yes",
      };

      getCommentData().then((data) => {
        if (!data) {
          getCommentJsonData().then((data) => {
            console.log(data);
            window.localStorage.setItem(
              "commtent",
              JSON.stringify(data.allList)
            );
          });
        } else {
          console.log(data);
          window.localStorage.setItem("commtent", JSON.stringify(data.allList));
        }
      });

      let Read = {
        one: "0/1",
        two: "0/1",
        three: "0/1",
        four: "0/1",
        five: "0/1",
      };
      window.localStorage.setItem("Read", JSON.stringify(Read));

      // 如果再进行登录的话，userinfo不是空的，就先取值，然后把写的登录信息放进去。然后再放回去。
      // 如果是空的，就直接放进去
      // 1.先取值,json
      // 2.判断空就把书本数据放进去
      // 3.新增用户信息对象
      // 4.存对象,json

      let userinfo = JSON.parse(localStorage.getItem("userinfo"));
      if (!userinfo) {
        userinfo = {
          bookcase: [],
          history: [],
        };
      }
      userinfo.usermsg = usermsg;
      localStorage.setItem("userinfo", JSON.stringify(userinfo));
      // let type = "yes"
      // localStorage.setItem("type",type)

      Toast.success("登录成功");
      router.push("/BookCase");
    };
    // 直接跳過不登陆,游客登录
    let nowtime = parseInt(new Date().getTime() / 1000) + "";
    let notoken = () => {
      // 直接放一个游客登录账号 tourist
      getCommentData().then((data) => {
        if (!data) {
          getCommentJsonData().then((data) => {
            console.log(data);
            window.localStorage.setItem(
              "commtent",
              JSON.stringify(data.allList)
            );
          });
        } else {
          console.log(data);
          window.localStorage.setItem("commtent", JSON.stringify(data.allList));
        }
      });

      let usermsg = {
        phonenum: nowtime,
        code: 1324,
        type: "no",
      };
      let userinfo = JSON.parse(localStorage.getItem("userinfo"));
      if (!userinfo) {
        userinfo = {
          bookcase: [],
          history: [],
        };
      }
      userinfo.usermsg = usermsg;
      localStorage.setItem("userinfo", JSON.stringify(userinfo));
      // let type = "no"
      // localStorage.setItem("type",type)

      Toast.success("登录成功");
      router.push("/BookCase");
    };

    let tipSendFun = () => {
      Toast({
        message: "请先发送验证码",
        position: "bottom",
      });
    };

    return {
      phonenum,
      code,
      submit,
      notoken,
      getcode,
      yzm,
      send,
      showtime,
      codetime,
      timer,
      nowtime,
      oknum,
      isfour,
      changecolor,
      tipSendFun,
      // color
      // time
    };
  },
};
</script>


<style lang="scss">
.loginView {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../assets/img/logo-bg.png);
    z-index: -1;
    opacity: 0.9;
  }
  .main {
    position: absolute;
    width: max-content;
    height: max-content;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
  }
  .havent {
    margin-top: 20px;
    width: 100%;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    color: #ff7f7e;
  }
  .submit {
    width: 78%;
    margin: 0 auto;
    height: 48px;
    background-color: rgba($color: #2cdd47, $alpha: 0.7);
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;
    color: #fff;
    font-size: 14px;
    &.con {
      background-color: hsl(174, 86%, 40%);
    }
  }
  .passinp {
    width: 86%;
    height: 46px;
    margin: 30px auto 30px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: flex-start;
    color: #333;
    background-color: rgba(255, 255, 255, 0.5);
    .cant {
      margin: 0 10px;
      display: block;
      flex: 1;
      color: #757575;
    }
    .le {
      margin-left: 24px;
      i {
        font-weight: bold;
        font-size: 26px;
      }
    }
    input {
      border: none;
      outline: none;
      display: block;
      margin-left: 10px;
      width: 166px;
      height: 46px;
      line-height: 46px;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
    }
    .ygm {
      display: flex;
      align-items: center;
      justify-content: center;
      width: max-content;
      height: 46px;
      line-height: 46px;
      font-size: 14px;
      color: #fe8788;
      margin-right: 20px;
      span {
        display: block;
        white-space: nowrap;
      }
    }
  }
  .phoneinp {
    width: 86%;
    height: 46px;
    margin: 0 auto;
    border-radius: 30px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.5);
    color: #333;
    .le {
      margin-left: 24px;
      i {
        font-size: 26px;
      }
    }
    input {
      border: none;
      outline: none;
      margin-left: 10px;
      flex: 1;
      height: 46px;
      line-height: 46px;
    }
  }
  .box {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -20px;
    .logo {
      width: 180px;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
  }
  .top {
    margin-top: 20px;
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    .le {
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      span {
        font-weight: normal;
        font-size: 16px;
        position: relative;
        bottom: 2px;
      }
    }
    .ri {
      border-radius: 14px;
      height: 28px;
      display: flex;
      align-items: center;
      font-size: 12px;
      padding: 0 10px 0 14px;
      background-color: rgba(0, 0, 0, 0.2);
      color: #fff;
      .iconfont {
        font-size: 12px;
      }
    }
  }
}
</style>